﻿{% extends "base.html" %}

{% block link %}
    <!-- 本页样式表 -->
    <link href="/static/css/article.css" rel="stylesheet"/>
    <link href="/static/css/blog.css" rel="stylesheet"/>
{% endblock %}


{% block body %}
    <div class="blog-body">

        <div class="blog-container">
            <blockquote class="layui-elem-quote sitemap layui-breadcrumb shadow" style="visibility: visible;">
                <a href="/index" title="网站首页">网站首页<span class="layui-box">&gt;</span></a>
                <a><cite>文章专栏</cite></a>
            </blockquote>
            <div class="blog-main">

                <div id="parentArticleList2" class="blog-main-left animated slideInLeft">
                    <div class="flow-default" id="parentArticleList">
                        <!--                    文章列表-->
                        {% for article in article_list %}
                            <div class="article shadow animated zoomIn" data-id="{{ article.id }}">
                                <div class="article-left ">
                                    <img src="{{ article.index_image_url }}" alt="Tomcat优化性能，JVM优化">
                                </div>
                                <div class="article-right">
                                    <div class="article-title">
                                        <span class="article_is_top">置顶</span>&nbsp;<span
                                            class="article_is_yc">原创</span>&nbsp;
                                        <a href="/article/{{ article.id }}">{{ article.title }}</a>
                                    </div>
                                    <div class="article-abstract">
                                        {{ article.digest }}
                                    </div>
                                </div>
                                <div class="clear"></div>
                                <div class="article-footer">
                                    <span><i class="fa fa-clock-o"></i>&nbsp;&nbsp;{{ article.create_at }}</span>
                                    <span class="article-author"><i
                                            class="fa fa-user"></i>&nbsp;&nbsp;' {{ article.source }}</span>
                                    <span><i class="fa fa-tag"></i>&nbsp;&nbsp;<a
                                            href="javascript:classifyList({{ article.category_id }});">{% for cate in cate_list %}
                                        {% if cate.id==article.category_id %}
                                            {{ cate.name }}
                                        {% else %}

                                        {% endif %}
                                    {% endfor %}
                                        </a></span>
                                    <span class="article-viewinfo"><i
                                            class="fa fa-eye"></i>&nbsp;{{ article.clicks }}</span>
                                    <span class="article-viewinfo"><i
                                            class="fa fa-commenting"></i>&nbsp;{{ article.comment_list.count() }}</span>
                                </div>
                            </div>
                        {% endfor %}
                    </div>
                    <div class="layui-flow-more">
                        <a href="javascript:loadMore();"><cite>加载更多</cite></a>
                    </div>
                </div>


                <div class="blog-main-right">

                    <div class="blog-search animated fadeInRight">
                        <div class="layui-form-item">
                            <div class="search-keywords  shadow">
                                <input type="text" id="keywords" name="keywords" lay-filter="searchInput"
                                       lay-verify="required" placeholder="输入关键词搜索" autocomplete="off"
                                       class="layui-input">
                            </div>
                            <div class="search-submit  shadow">
                                <a class="search-btn" lay-submit="searchForm" lay-filter="searchForm"><i
                                        class="fa fa-search"></i></a>
                            </div>
                        </div>
                    </div>

                    <div class="article-category shadow categoryOut">
                        <div class="article-category-title">分类导航</div>
                        {% for cate in cate_list %}
                            {% if cate.id==1 %}
                                <a href="/">{{ cate.name }}</a>
                            {% else %}
                                <a href="/article?cid={{ cate.id }}">{{ cate.name }}</a>
                            {% endif %}
                        {% endfor %}
                        <div class="clear"></div>
                    </div>

                    <div class="layui-tab layui-tab-brief shadow animated fadeInRight" lay-filter="docDemoTabBrief">
                        <ul class="layui-tab-title">
                            <li class="layui-this">点击排行</li>
                            <li>站长推荐</li>
                        </ul>
                        <div class="layui-tab-content">
                            <div class="layui-tab-item layui-show">
                                <ul class="blog-module-ul">
                                    <li>
											<span>
<i class="layui-badge-rim layui-bg-red">1</i>
</span> &nbsp;&nbsp;
                                        <a href="#">1</a>
{#                                        <a href="detail.html">Tomcat优化性能，JVM优化</a>#}
                                    </li>
                                    <li>
											<span>
<i class="layui-badge-rim layui-bg-orange">2</i>
</span> &nbsp;&nbsp;
{#                                        <a href="detail.html">Redis安装</a>#}
                                        <a href="detail.html">2</a>
                                    </li>
                                    <li>
											<span>
<i class="layui-badge-rim layui-bg-green">3</i>
</span> &nbsp;&nbsp;
{#                                        <a href="detail.html">Spring boot 使用 JSP</a>#}
                                        <a href="detail.html">2</a>
                                    </li>
                                    <li>
											<span>
<i class="layui-badge-rim">4</i>
</span> &nbsp;&nbsp;
{#                                        <a href="detail.html">Spring Boot 表单验证@Valid</a>#}
                                        <a href="detail.html">2</a>
                                    </li>
                                    <li>
											<span>
<i class="layui-badge-rim">5</i>
</span> &nbsp;&nbsp;
{#                                        <a href="detail.html">Spring boot 的核心配置文件</a>#}
                                        <a href="detail.html">2</a>
                                    </li>
                                    <li>
											<span>
<i class="layui-badge-rim">6</i>
</span> &nbsp;&nbsp;
{#                                        <a href="detail.html">Centos7安装和配置jre1.8</a>#}
                                        <a href="detail.html">2</a>
                                    </li>
                                    <li>
											<span>
<i class="layui-badge-rim">7</i>
</span> &nbsp;&nbsp;
{#                                        <a href="detail.html">centos7对外开放端口</a>#}
                                        <a href="detail.html">2</a>
                                    </li>
                                    <li>
											<span>
<i class="layui-badge-rim">8</i>
</span> &nbsp;&nbsp;
{#                                        <a href="detail.html">怎么关闭eclipse对js xml的验证?</a>#}
                                        <a href="detail.html">2</a>
                                    </li>
                                    <li>
											<span>
<i class="layui-badge-rim">9</i>
</span> &nbsp;&nbsp;
{#                                        <a href="detail.html">向百度主动推送以加快网页的收录速度！</a>#}
                                        <a href="detail.html">2</a>
                                    </li>
                                    <li>
											<span>
<i class="layui-badge-rim">10</i>
</span> &nbsp;&nbsp;
{#                                        <a href="detail.html">支付宝开发者入驻</a>#}
                                        <a href="detail.html">2</a>
                                    </li>
                                </ul>
                            </div>
                            <div class="layui-tab-item">
                                <ul class="blog-module-ul">
                                    <li>
                                        <span class="article_is_yc">原创</span> &nbsp;&nbsp;
{#                                        <a href="detail.html">Tomcat优化性能，JVM优化</a>#}
                                        <a href="detail.html">1</a>
                                    </li>
                                    <li>
                                        <span class="article_is_yc">原创</span> &nbsp;&nbsp;
{#                                        <a href="detail.html">Redis安装</a>#}
                                         <a href="detail.html">1</a>
                                    </li>
                                    <li>
                                        <span class="article_is_yc">原创</span> &nbsp;&nbsp;
{#                                        <a href="detail.html">Spring boot 使用 JSP</a>#}
                                         <a href="detail.html">1</a>
                                    </li>
                                    <li>
                                        <span class="article_is_yc">原创</span> &nbsp;&nbsp;
{#                                        <a href="detail.html">Spring Boot 表单验证@Valid</a>#}
                                         <a href="detail.html">1</a>
                                    </li>
                                    <li>
                                        <span class="article_is_yc">原创</span> &nbsp;&nbsp;
{#                                        <a href="detail.html">Spring boot 的核心配置文件</a>#}
                                         <a href="detail.html">1</a>
                                    </li>
                                    <li>
                                        <span class="article_is_yc">原创</span> &nbsp;&nbsp;
{#                                        <a href="detail.html">Centos7安装和配置jre1.8</a>#}
                                         <a href="detail.html">1</a>
                                    </li>
                                    <li>
                                        <span class="article_is_yc">原创</span> &nbsp;&nbsp;
{#                                        <a href="detail.html">centos7对外开放端口</a>#}
                                         <a href="detail.html">1</a>
                                    </li>
                                    <li>
                                        <span class="article_is_yc">原创</span> &nbsp;&nbsp;
{#                                        <a href="detail.html">怎么关闭eclipse对js xml的验证?</a>#}
                                         <a href="detail.html">1</a>
                                    </li>
                                    <li>
                                        <span class="article_is_yc">原创</span> &nbsp;&nbsp;
{#                                        <a href="detail.html">向百度主动推送以加快网页的收录速度！</a>#}
                                         <a href="detail.html">1</a>
                                    </li>
                                    <li>
                                        <span class="article_is_yc">原创</span> &nbsp;&nbsp;
{#                                        <a href="detail.html">支付宝开发者入驻</a>#}
                                         <a href="detail.html">1</a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>

                    <div class="category-toggle"><i class="fa fa-chevron-left"></i></div>
                </div>
            </div>
            <div class="clear"></div>
        </div>
    </div>
{% endblock %}

{% block js %}
    <script src="/static/js/jquery.min.js"></script>
    <script src="/static/layui/layui.js"></script>
    <script src="/static/js/global.js"></script>
    <script src="/static/js/article.js"></script>
    <script>
      function loadMore() {
        layer.msg('功能要自己写');
      }
    </script>
    <script>
      layui.use(function() {

        var laypage = layui.laypage;
       });
    </script>
    <script>
      function loadMore() {
        var existingArticles = $('.article.shadow.animated.zoomIn').map(function() {
          return $(this).text();
        }).get();
        $.post('/append_data',
            {lastArticleId: $('.article.shadow.animated.zoomIn').last().data('id'), existingArticles: existingArticles},
            function(res) {
              // res is the response from the server, which contains the new articles
              if (res.new_articles[0] === '文章已经到底了') {
                layui.layer.msg('文章已经到底了');
              } else {
                layui.each(res.new_articles, function(index, item) {
                  var newArticle = '<div class="article shadow animated zoomIn" data-id="' + item.id + '">' +
                      '<div class="article-left ">' +
                      '<img src="' + item.index_image_url + '" alt="' + item.title + '">' +
                      '</div>' +
                      '<div class="article-right">' +
                      '<div class="article-title">' +
                      '<span class="article_is_top">置顶</span>&nbsp;<span class="article_is_yc">原创</span>&nbsp;' +
                      '<a href="/article/' + item.id + '">' + item.title + '</a>' +
                      '</div>' +
                      '<div class="article-abstract">' +
                      item.digest +
                      '</div>' +
                      '</div>' +
                      '<div class="clear"></div>' +
                      '<div class="article-footer">' +
                      '<span><i class="fa fa-clock-o"></i>&nbsp;&nbsp;' + item.create_at + '</span>' +
                      '<span class="article-author"><i class="fa fa-user"></i>&nbsp;&nbsp;' + item.source + '</span>' +
                      '<span><i class="fa fa-tag"></i>&nbsp;&nbsp;<a href="javascript:classifyList(' +
                      item.category_id + ');">' + item.category_name + '</a></span>' +
                      '<span class="article-viewinfo"><i class="fa fa-eye"></i>&nbsp;' + item.clicks + '</span>' +
                      '<span class="article-viewinfo"><i class="fa fa-commenting"></i>&nbsp;0</span>' +
                      '</div>' +
                      '</div>';
                  $('#parentArticleList').
                      append(newArticle); // Append new articles to the list
                });
              }
            });
      }
    </script>
{% endblock %}

